<template>
    <view class="mask mask-show u_loading" v-if="loadingShow" @touchmove.stop.prevent="preventTouchMove">
        <!-- 加载动画开始 -->
        <view class="loader">
            <view class="loader-inner ball-clip-rotate-pulse">
                <view :style="'background:'+themeColor"></view>
                <view :style="'border-color:'+themeColor+' transparent '+themeColor+' transparent'"></view>
            </view>
        </view>
        <!-- 加载动画结束 -->
    </view>
</template>

<script scoped="true">
    import { mapGetters, mapMutations } from 'vuex';
    export default {
        computed: {
            ...mapGetters(['loadingShow','themeColor'])
        },
        methods:{
            preventTouchMove(){
                console.log('stop user scroll it!');
                return;
            }
        }
    };
</script>

<style lang="scss" scoped>
    .u_loading{
        &.mask {
            /* pointer-events: none; */
            position: fixed;
            z-index: 99999;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            height: 100vh;
            width: 100vw;
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
        &.mask-show {
            background: rgba(255,255,255, 0.3);
        }
        .loader {
            box-sizing: border-box;
            display: flex;
            flex: 0 1 auto;
            flex-direction: column;
            flex-grow: 1;
            flex-shrink: 0;
            flex-basis: 25%;
            max-width: 25%;
            height: 200px;
            align-items: center;
            justify-content: center;
        }
        .ball-clip-rotate-pulse {
            position: relative;
            -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
        }
        .ball-clip-rotate-pulse > view:first-child {
            background: #fff;
            height: 18px;
            width: 18px;
            top: 5px;
            left: -9px;
            -webkit-animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
            animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
        }
        .ball-clip-rotate-pulse > view:last-child {
            position: absolute;
            border: 2px solid #fff;
            width: 32px;
            height: 32px;
            left: -16px;
            top: -2px;
            background: transparent;
            border: 2px solid;
            border-color: #fff transparent #fff transparent;
            -webkit-animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
            animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
        }
        .ball-clip-rotate-pulse > view {
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            position: absolute;
            top: 0px;
            left: 0px;
            border-radius: 100%;
        }
        @keyframes scale {
            30% {
                -webkit-transform: scale(0.3);
                transform: scale(0.3); }
            100% {
                -webkit-transform: scale(1);
                transform: scale(1); }
        }
        @keyframes rotate {
            0% {
                -webkit-transform: rotate(0deg) scale(1);
                transform: rotate(0deg) scale(1); }
            50% {
                -webkit-transform: rotate(180deg) scale(0.6);
                transform: rotate(180deg) scale(0.6); }
            100% {
                -webkit-transform: rotate(360deg) scale(1);
                transform: rotate(360deg) scale(1); } }

    }

</style>
